/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

// Colors

@primary-color: ~'var(--ant-primary-color)';
@success-color: ~'var(--ant-success-color)';
@warning-color: ~'var(--ant-warning-color)';
@error-color: ~'var(--ant-error-color)';
@info-color: ~'var(--ant-info-color)';
@link-color: ~'var(--ant-primary-color)';
@radio-button-checked-bg: ~'var(--ant-primary-1)';
@highlight-color: #f41111;
@primary-25: ~'var(--ant-primary-25)'; // #f5faff
@primary-50: ~'var(--ant-primary-50)'; // #eff8ff
@primary-1: ~'var(--ant-primary-1)'; // #d1e9ff
@primary-2: ~'var(--ant-primary-2)'; // #b2ddff
@primary-3: ~'var(--ant-primary-3)'; // #84caff
@primary-4: ~'var(--ant-primary-4)'; // #53b1fd
@primary-5: ~'var(--ant-primary-5)'; // #2e90fa
@primary-6: ~'var(--ant-primary-6)'; // #1570ef
@primary-7: ~'var(--ant-primary-7)'; // #175cd3
@primary-8: ~'var(--ant-primary-8)'; // #1849a9
@primary-9: ~'var(--ant-primary-9)'; // #194185
@green-1: #28a744;
@green-2: #ebf9f4;
@green-3: #48ca9e;
@green-4: #48ca9e30;
@green-5: #91ffd8;
@green-6: #effffb;
@green-7: #00b871;
@green-8: #48ca9e08;
@green-9: #ecfdf3;
@green-10: #027a48;
@green-11: #3f9593;
@green-12: #d1fadf;
@green-13: #039855;
@green-14: #507a02;
@green-15: #f7ffe7;
@green-16: #abefc6;
@green-17: #067647;

@yellow-1: #fbf2db;
@yellow-2: #ffbe0e;
@yellow-3: #ffbe0e1a;
@yellow-4: #ffd978;
@yellow-5: #fff8e6;
@yellow-6: #c18100;
@yellow-7: #e7b85d;
@yellow-8: #ffbe0e08;
@yellow-9: #ffbe0e0d;
@yellow-10: #fffaeb;
@yellow-11: #b54708;
@yellow-12: #fedf89;

@error-light-color: #ff9a8e40;
@failed-color: #cb2431;
@red-1: #cb2531;
@red-2: #faf1f1;
@red-3: #f24822;
@red-4: #f2482230;
@red-5: #ffc2c2;
@red-6: #fcf0f1;
@red-7: #cf1800;
@red-8: #ff7c5008;
@red-9: #fef3f2;
@red-10: #b42318;
@red-11: #f3126033;
@red-12: #f31260;
@red-13: #fda29b;
@red-14: #d92d20;
@red-15: #e52315;
@red-16: #7e2410;
@red-17: #c01048;
@red-18: #fff1f3;
@red-19: #fecdca;
@red-20: #bc1b06;
@red-21: #ef4444;
@red-22: #f04438;
@red-23: #e62e05;
@orange-1: #fff6ed;
@orange-50: #fef6ee;
@orange-2: #c4320a;
@orange-3: #ffd6ae;
@orange-7: #b93815;
@orange-8: #f79009;
@orange-200: #f9dbaf;
@orange-600: #e04f16;

@purple-1: #f2edfd;
@purple-2: #7147e8;
@purple-3: #a2a1ff;
@purple-4: #efedfe80;
@purple-5: #6941c6;
@purple-6: #f9f5ff;
@purple-7: #e9d7fe;

@indigo-100: #e0eaff;
@indigo-600: #444ce7;

@blue-1: #ebf6fe;
@blue-2: #3ca2f4;
@blue-3: #0950c5;
@blue-4: #f1f9ff;
@blue-5: #f2f6fc;
@blue-6: #eff5ff;
@blue-7: #3062d4;
@blue-8: #f5f8ff;
@blue-9: @primary-7;
@blue-10: #005bc4;
@blue-12: @primary-color;
@blue-13: #e0f2fe;
@blue-14: @primary-25;
@blue-16: @primary-3;
@blue-17: #0968da;
@blue-18: #e3e3e3;
@blue-20: #d5d9eb;
@blue-21: #026aa2;
@blue-22: #f0f9ff;
@blue-23: #e6f1fe;
@blue-24: @primary-5;
@blue-25: @primary-2;
@blue-26: @primary-8;
@blue-27: #2196f3;
@blue-28: #e3f2fd4d;
@blue-29: #eff4fa;
@blue-30: #d2dbeb;
@blue-31: #3a86ff;
@blue-32: #0057e2;
@blue-33: #eff8ff;
@blue-34: #175cd3;
@blue-35: #3d3dd6;
@blue-36: #1568da;
@blue-37: #215df3e5;
@blue-38: #d0e3fc;
@blue-39: #b2ddff;
@blue-40: #f5faff;
@blue-41: #b3b8db;
@blue-42: #1d4ed8;
@blue-43: #374151;
@blue-44: #155eef;
@grey-text: #2c2c2c;
@partial-success-1: #06a4a4;
@partial-success-2: #bdeeee;
@black: #000000;
@aborted-color: #efae2f;
@text-color: @grey-900;
@text-color-tertiary: @grey-700;
@grey-1: #f8f8f8;
@grey-2: #f2f2f2;
@grey-3: #959595;
@grey-4: #757575;
@grey-5: #fbfbfb;
@grey-6: #f9f9f9;
@grey-7: #9ca3af;
@grey-9: #f8f9fc;
@grey-10: #8c8c8c;
@grey-11: #262626;
@grey-13: #71717a;
@grey-15: #eaecf5;
@grey-16: #f4f5f7;
@grey-18: #afb5d9;
@grey-19: #363f72;
@grey-20: #dce3ec;
@grey-21: #ababab;
@grey-22: #d9d9d9;
@grey-23: #f7f7f7;
@grey-24: #979797;
@grey-25: #dbe0e7;
@grey-26: #fcfcfd;
@grey-27: #0a0d120d;
@grey-28: #00000040;
@grey-29: #f9faff;
@grey-30: #f4f6fb;
@grey-31: #f1f3fc;
@grey-32: #6b7f99;
@grey-33: #4c526c;
@grey-34: #d3d3d3;
@grey-35: #0a0d120a;
@grey-46: #eeeeee;
@grey-36: #f3f4f6;
@grey-37: #ebf5ff;
@grey-38: #f2f3f9;
@grey-40: #dbe0e7;
@text-grey-muted: @grey-4;
@de-active-color: #6b7280;
@font-size-base: 14px;
@box-shadow-base: 0px 2px 10px rgba(0, 0, 0, 0.12);
@button-box-shadow-default: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
@button-box-shadow-hover: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
@button-box-shadow-focus: 0px 0px 0px 4px @primary-1;
@button-box-shadow-disabled: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
@button-box-shadow-grey: 0px 1px 2px 0px rgba(10, 13, 18, 0.05),
  0px 0px 0px 4px #f5f5f5;
@box-shadow-surface-default: 0px 4px 6px -2px #0a0d1208,
  0px 12px 16px -4px #0a0d1214;

// Additional box shadows
@box-shadow-card-subtle: 0px 1px 2px 0px #0a0d120d;
@box-shadow-elevated-multi: 0 1px 2px rgba(16, 24, 40, 0.05),
  0 4px 8px rgba(16, 24, 40, 0.1), 0 8px 16px rgba(16, 24, 40, 0.1);
@box-shadow-sticky-reverse: 0px -13px 16px -4px #0a0d1214;
@box-shadow-highlight-light: 0 2px 8px rgba(21, 112, 239, 0.15);
@box-shadow-highlight-medium: 0 2px 12px rgba(21, 112, 239, 0.25);
@box-shadow-small-dark: 0 1px 3px rgba(0, 0, 0, 0.2);
@box-shadow-ant-select: 0 0 0 2px rgba(82, 119, 215, 0.2);

@white: #fff;
@white-alpha-10: #ffffff1a;
@checkbox-size: 14px;
@switch-height: 16px;
@switch-sm-height: 12px;
@switch-min-width: 30px;
@switch-sm-min-width: 23px;

// Sizes to use commonly for padding, margin, etc.
@size-xxs: 4px;
@size-xs: 8px;
@size-sm: 12px;
@size-md: 16px;
@size-mlg: 20px;
@size-lg: 24px;
@size-xl: 36px;
@size-2xl: 48px;
@size-3xl: 64px;

@margin-xlg: 48px;
@body-dark-bg-color: #f1f1f3;
@border-color: @grey-15;
@border-color-1: @grey-200;
@border-color-2: @grey-300;
@border-color-3: #d4d4d8;
@border-color-4: #e4e4e7;
@border-color-5: #dde3ea;
@border-color-6: #dfdfdf;
@border-color-7: #faf9fc;
@border-color-8: #e9e8eb;
@global-border: 1px solid @border-color;
@nlp-border-color: #b9e6fe;
@active-color: #e8f4ff;
@rdg-cell-range-selections-background-color: #e9effd;
@background-color: #ffffff;
@announcement-background: @blue-28;
@announcement-background-dark: #e1edff;
@announcement-border: @blue-27;
@announcement-border-light: #e2e2e2;
@test-parameter-bg-color: #e7ebf0;
@group-title-color: #76746f;
@light-border-color: #f0f0f0;
@code-background: #ebeff480;
@timestamp-color: #9197b3;
@left-sidebar-icon-hover: #edecf8;
@divider-color: @border-color;
@tag-default-bg: @grey-1;
@grey-bg-with-alpha: #7575751a;
@btn-shadow: none;
@user-profile-background: #f4f8ff;
@success-background-color: rgba(0, 131, 118, 0.2);
@tag-background-color: rgba(0, 0, 0, 0.03);
@overlay-background-color: rgba(0, 0, 0, 0.45);
@trigger-btn-hover-bg: #efefef;
@text-highlighter: #ffc34e40;
@team-avatar-bg: #0950c51a;
@om-navbar-height: ~'var(--ant-navbar-height)';
@sidebar-width: 84px;
@alert-text-color: @text-color-tertiary;
@alert-info-bg: @blue-14;
@alert-success-bg: #f6fef9;
@alert-warning-bg: #fffcf5;
@alert-error-bg: #fffbfa;
@alert-success: #6ce9a6;
@alert-warning: #fec84b;
@alert-error: @red-13;
@alert-info: @blue-16;
@alert-info-icon: @blue-12;
@alert-info-icon-bg-1: @primary-1;
@alert-info-icon-bg-2: @primary-button-background;
@alert-success-icon: @green-13;
@alert-success-icon-bg-1: @green-12;
@alert-success-icon-bg-2: @green-9;
@alert-warning-icon: #dc6803;
@alert-warning-icon-bg-1: #fef0c7;
@alert-warning-icon-bg-2: @yellow-10;
@alert-error-icon: @red-14;
@alert-error-icon-bg-1: #fee4e2;
@alert-error-icon-bg-2: @red-9;

// Font
@font-family: 'Inter', 'Poppins', sans-serif;

// Sizing
@page-height: calc(100vh - @om-navbar-height - @padding-mlg);
@left-side-panel-width: 230px;

@data-asset-header-height: 0px; // Original height: 230px currently set to 0 to allow full scroll
@data-asset-header-height-versions-page: 114px;
@tab-height: 60px;

@entity-details-tab-height: calc(
  100vh - @data-asset-header-height - @tab-height - @om-navbar-height - @size-xs
);
@entity-version-page-tabs-height: calc(
  100vh - @data-asset-header-height-versions-page - @tab-height -
    @om-navbar-height - @size-md
);

@app-details-page-tabs-height: calc(
  100vh - 132px - @tab-height - @om-navbar-height - @size-md
);
@app-install-page-tabs-height: calc(
  100vh - 70px - @om-navbar-height - @size-md
);

@users-page-tabs-height: calc(100vh - @om-navbar-height - 58px);

@services-page-tabs-height: calc(
  100vh - 36px - @tab-height - @om-navbar-height - @size-md
);
/* navbar+tab_height+padding = 64+46+12  */

@glossary-page-height: calc(
  100vh - 96px - @tab-height - @om-navbar-height - @size-mlg
);

@domain-page-height: calc(
  100vh - 96px - @tab-height - @om-navbar-height - @size-mlg
);

@incident-manager-page-height: calc(
  100vh - 154px - @tab-height - @om-navbar-height - @size-mlg
);

@glossary-term-page-height: calc(
  100vh - 96px - @tab-height - @om-navbar-height - @size-mlg
);

@tag-page-height: calc(
  100vh - 96px - @tab-height - @om-navbar-height - @size-mlg
);
@metric-page-height: calc(
  100vh - 188px - @tab-height - @om-navbar-height - @size-mlg
);

@welcome-page-height: calc(100vh - 112px);

@profile-page-sidebar: calc(100vh - @om-navbar-height - 20px);
@profile-entity-details-tab-height: calc(@profile-page-sidebar - 64px);
@user-profile-page-panel-height: calc(100vh - @om-navbar-height - 88px);

//  48px - navbar height
@welcome-page-height: calc(100vh - 48px - @om-navbar-height);

// 152px - navbar height
@glossary-page-tab-height: calc(100vh - 152px - @om-navbar-height);
@lineage-sidebar-width: 110px;

// Severity
@severity-1: #9c0700;
@severity-2: #be3b00;
@severity-3: #c27400;
@severity-4: #ad8600;
@severity-5: #6e7343;

@severity-1-background: rgba(222, 57, 49, 0.1);
@severity-2-background: rgba(247, 99, 33, 0.1);
@severity-3-background: rgba(255, 165, 33, 0.1);
@severity-4-background: rgba(255, 206, 41, 0.1);
@severity-5-background: rgba(181, 198, 33, 0.1);
@severity-6-background: rgba(154, 154, 154, 0.2);

// Border Radius
@border-rad-base: @size-xxs;
@border-rad-xs: @size-xs;
@border-rad-sm: @size-sm;
@border-rad-md: @size-md;
@border-rad-lg: @size-mlg;
@border-rad-xl: @size-lg;

// vertical paddings
@padding-lg: @size-lg; // containers
@padding-mlg: @size-mlg; // small containers and buttons
@padding-md: @size-md; // small containers and buttons
@padding-sm: @size-sm; // Form controls and items
@padding-xs: @size-xs; // small items
@padding-xss: @size-xxs; // more small

// vertical margins
@margin-lg: @size-lg; // containers
@margin-mlg: @size-mlg; // small containers and buttons
@margin-md: @size-md; // small containers and buttons
@margin-sm: @size-sm; // Form controls and items
@margin-xs: @size-xs; // small items
@margin-xss: @size-xxs; // more small

@error-bg-color: rgb(from @error-color r g b / 0.1);
@success-bg-color: rgb(from @success-color r g b / 0.1);
@warning-bg-color: rgb(from @warning-color r g b / 0.1);
@info-bg-color: rgb(from @info-color r g b / 0.1);

@card-radius: @border-rad-sm;
@menu-radius: @border-rad-sm;

// Layout

@layout-body-background: @grey-9;
@layout-header-background: @grey-9;
@layout-header-height: 80px;
@layout-header-padding: 20px 24px;

@menu-bg: @grey-9;

// Buttons

@btn-border-radius-base: @border-rad-xs;
@btn-border-radius-sm: @border-rad-xs;

// Checkbox
@checkbox-border-radius: 4px; // to override ant design default 2px

//grey colors
@grey-25: #fdfdfd;
@grey-50: #fafafa;
@grey-100: #f5f5f5;
@grey-200: #e9eaeb;
@grey-300: #d5d7da;
@grey-400: #a4a7ae;
@grey-500: #717680;
@grey-600: #535862;
@grey-700: #414651;
@grey-800: #252b37;
@grey-900: #181d27;
@tag-text: #404040;

//Blue colors (based on design system)
@blue-500: #0ba5ec;

//Green colors (based on design system)
@green-500: #17b26a;

@warning-100: #fef0c7;
@warning-400: #fdb022;

//font weight
@font-regular: 400;
@font-medium: 500;
@font-semibold: 600;
@font-bold: 700;

// new Theme border color
@border-light: #ebeef2;
@border-secondary: #e2c6f2;

@background-primary: #f8f9fa;

@primary-heading-color: @blue-9;
@navigation-text-color: #787486;
@primary-button-background: @primary-50;

// button sizes
@btn-height-sm: 36px;
@btn-height-base: 40px;
@btn-height-lg: 44px;

@focus-outline-color: #e6f4ff;
@om-rdg-border-color: #e0e0e0;
@om-rdg-header-color: #4a4a4a;
